<template>
  <div class="container">
    <!-- 标题部分 -->
    <div class="title" style="line-height: 24px;font-size: 22px;text-align: left;display: flex">
      <h1><span style="font-size: 18px;"> 场地名称：</span>{{ playground.contentTitle }}</h1>
      <h1 style="margin-left: 20px">
        <div>
          <el-icon>
            <View/>
          </el-icon>
          <span>{{ playground.playgroundView }}</span></div>
      </h1>
    </div>

    <!-- 作者及更新时间 -->
    <div class="section">
      <div class="section-title">基本信息</div>
      <div class="section-content">
        <p style="text-indent: 5px;">作者：{{ playground.contentAuthor }}</p>
        <p style="text-indent: 5px;">最近编辑人：{{ playground.contentRecentEditor }}</p>
        <p style="text-indent: 5px;">创建时间：{{ playground.contentCreateTime }}</p>
        <p style="text-indent: 5px;">更新时间：{{ playground.contentUpdateTime }}</p>
      </div>
    </div>

    <!-- 场地信息 -->
    <div class="section">
      <div class="section-title">场地信息</div>
      <div class="section-content">
        <p style="text-indent: 5px;">内容分类：{{ playground.contentCategory }}</p>
        <p style="text-indent: 5px;">额外消费：{{ playground.contentPrice }}</p>
      </div>
    </div>

    <!-- 场地描述 -->
    <div class="section">
      <div class="section-title">场地描述</div>
      <div class="section-content">
        <p style="text-indent: 5px;">内容描述：{{ playground.contentDescription }}</p>
        <p style="text-indent: 5px;">内容指引位置：{{ playground.contentGuidePosition }}</p>
      </div>
    </div>

    <!-- 图片展示 -->
    <div class="section">
      <div class="section-title">相关图片</div>
      <div class="img">
        <div v-if="playground.contentImage && playground.contentImage.length > 0" style="margin-top: 20px">
          <el-image
              v-for="(image, index) in playground.contentImage"
              :key="index"
              :alt="`图片${index + 1}`"
              :initial-index="index"
              :preview-src-list="playground.contentImage"
              :src="image"
              class="image-item"
              fit="cover"
          />
        </div>
        <div v-else>
          <p style="text-indent: 5px;">暂无图片</p>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="buttons">
      <el-button type="primary" @click="Edit">编辑</el-button>
      <el-button type="danger" @click="Delete">删除</el-button>
    </div>

    <!-- 编辑记录 -->
    <div class="section" style="margin-top: 20px;">
      <div class="section-title">编辑记录</div>
      <el-collapse v-model="activeNames" style="margin-top: 20px;">
        <el-collapse-item name="1" title="点击展开/收起">
          <div class="edit-record">
            <div
                v-for="(edit, index) in recentEdit"
                :key="index"
                class="edit-item"
            >
              {{ edit.updateEditor }} 于 {{ edit.updateTime }} 编辑了 {{ edit.updateOperation }} 部分
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <!-- 评论区 -->
    <div class="section" style="margin-top: 20px;">
      <div class="section-title">评论区</div>
      <el-collapse v-model="activeNames" style="margin-top: 20px;">
        <el-collapse-item name="2" title="点击展开/收起">
          <CommentList/>
          <CommentBox/>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import router from "@/router/index.ts";
import CommentBox from "@/views/Comment/CommentBox.vue";
import CommentList from "@/views/Comment/CommentList.vue";
import {View} from "@element-plus/icons-vue";

export default {
  components: {View, CommentList, CommentBox},
  data() {
    return {
      playgroundId: "",
      playground: {
        contentId: "",
        contentTitle: "",
        contentCategory: "",
        contentPrice: "",
        contentDescription: "",
        contentGuidePosition: "",
        contentAuthor: "",
        contentRecentEditor: "",
        contentCreateTime: "",
        contentUpdateTime: "",
        contentImage: [], // 初始化为数组
      },
      activeNames: [],
      currentUser: "",
      recentEdit: [], // 编辑记录
      isMounted: true,
      timer: null,
    };
  },
  mounted() {
    this.playgroundId = this.$route.query.playgroundId; // 获取路由参数 contentId
    this.currentUser = localStorage.getItem("username");
    this.getPlaygroundData();
    this.getPlaygroundRecentEdit();
    this.timer = setTimeout(this.addView, 5000);
  },
  methods: {
    addView: function () {
      if (!this.isMounted) {
        console.log("组件已卸载，不再增加浏览量");
        return;
      }
      axios.post("/playground/addView/" + this.playgroundId).then((res) => {
        console.log(res.data.data);
      }).catch((error) => {
        ElMessage.error(error);
      });
    },
    // 获取 Playground 数据
    getPlaygroundData: function () {
      axios
          .get(`/playground/get/` + this.playgroundId)
          .then((res) => {
            this.playground = res.data.data;

            // 如果 contentImage 是 JSON 字符串，解析为数组
            if (typeof this.playground.contentImage === "string") {
              try {
                this.playground.contentImage = JSON.parse(this.playground.contentImage);
              } catch (error) {
                console.error("解析 contentImage 失败:", error);
                this.playground.contentImage = []; // 解析失败时设置为空数组
              }
            }
          })
          .catch((error) => {
            ElMessage.error("获取数据失败：" + error.message);
          });
    },

    // 获取编辑记录
    getPlaygroundRecentEdit: function () {
      axios
          .get(`/recentEdit/playground/` + this.playgroundId)
          .then((res) => {
            this.recentEdit = res.data.data;
          })
          .catch((error) => {
            ElMessage.error("获取编辑记录失败：" + error.message);
          });
    },

    // 编辑按钮
    Edit: function () {
      router.push({
        path: "/editPlayground",
        query: {
          playgroundId: this.playgroundId,
        },
      });
    },

    // 删除按钮
    Delete: function () {
      ElMessageBox.confirm("此操作将永久删除该条目，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            if (this.playground.contentAuthor !== this.currentUser) {
              ElMessage.error("您不是该内容的创建者，无法删除");
              return;
            }
            axios
                .delete(`/playground/delete/` + this.playgroundId)
                .then((res) => {
                  ElMessage.success("已删除");
                  router.push("/playgroundList");
                })
                .catch((error) => {
                  ElMessage.error("删除失败：" + error.message);
                });
          })
          .catch(() => {
            ElMessage.info("已取消删除");
          });
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section {
  border-top: 2px solid #181818;
  border-radius: 0;
  padding: 10px;
  position: relative;
  margin-bottom: 10px;
}

.section-title {
  font-size: 22px;
  font-weight: bold;
  position: absolute;
  top: -15px;
  left: 40px;
  background-color: #e9eef3;
  padding: 5px;
  border-radius: 5px;
  line-height: 22px;
}

.section-content {
  font-size: 20px;
  line-height: 24px;
}

.section-content p {
  text-indent: 5px;
  text-align: left;
}

.img {
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.image-item {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin: 2px;
}

.buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.edit-record,
.comment-list {
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.edit-item {
  margin-bottom: 5px;
  padding: 5px;
  background-color: #f0f8ff;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  line-height: 1.2;
  font-size: 14px;
}

/* 暗黑模式下的样式 */
[data-theme="dark"] .container {
  background-color: black; /* 容器背景变为深灰色 */
  color: white; /* 字体变为白色 */
}

[data-theme="dark"] .section {
  border-top-color: white; /* 边框变为白色 */
}

[data-theme="dark"] .section-title {
  background-color: black; /* 标题背景变为深灰色 */
  color: white; /* 标题字体变为白色 */
}

[data-theme="dark"] .section-content {
  background-color: black; /* 内容背景变为深灰色 */
  color: white; /* 内容字体变为白色 */
}

[data-theme="dark"] .img {
  border: 1px solid white; /* 图片边框变为白色 */
}

[data-theme="dark"] .buttons {
  background-color: black; /* 按钮容器背景变为深灰色 */
}

[data-theme="dark"] .buttons .el-button {
  background-color: black; /* 按钮背景变为深灰色 */
  color: white; /* 按钮字体变为白色 */
}

[data-theme="dark"] .buttons .el-button:hover {
  background-color: black; /* 按钮悬停背景变为深灰色 */
}

[data-theme="dark"] .edit-record,
[data-theme="dark"] .comment-list {
  background-color: black; /* 编辑记录和评论区背景变为深灰色 */
  border-color: white; /* 边框变为白色 */
  color: white; /* 字体变为白色 */
}

[data-theme="dark"] .edit-item {
  background-color: #555; /* 编辑记录项背景变为深灰色 */
  border-color: white; /* 边框变为白色 */
  color: white; /* 字体变为白色 */
}
</style>